/**
 * 技师管理的增加、编辑
 * @author: minzhang
 * @update: 2016-10-13
 */

import React, {PropTypes} from 'react';
import {Link} from 'dva/router';
import {Form, Input, Modal, Icon, message, Spin, Select, Button, Row, Col } from 'antd';
import classnames from 'classnames';
import moment from 'moment';
import CommonCodeInput from '../Common/CommonCodeInput';
				
const FormItem = Form.Item;
const Option = Select.Option;
const OptGroup = Select.OptGroup;

const formItemLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 18,
    },
};

const RoomsManageModal = ({
    title,
    visible,
    item,
    btnLoading,
    modalLoading,
		selectData,
    onOk,
		onOkAndAdd,
		onAddType,
		onCancel,
    form: {
			getFieldDecorator,
			validateFields,
			getFieldsValue,
			resetFields,
			setFieldsValue,
    },
}) => {

    function handleOk(callback) {
        validateFields((errors) => {
//            if (errors) {
//                return;
//            }
            const data = getFieldsValue();
//						if(item.tech_id) {
//                data.tech_id = item.tech_id;
//            }
						
            callback(data, () => {
                resetFields();
            });
        });
    }
	
		function handleCancel() {
			resetFields();
			onCancel();
    }

    const modalOpts = {
        title,
        visible,
        width: 600,
        maskClosable: false,
				onCancel: handleCancel,
				footer: (
					<div>
						<Button onClick={() => {handleOk(onOkAndAdd)}} size="large" loading={btnLoading}>保存并继续添加</Button>
						<Button type="primary" onClick={() => {handleOk(onOk)}} size="large" loading={btnLoading}>保存</Button>
					</div>
				)
    };
	
		const data = ['1', '2', '3'];
	
		const loop = data => data.map((value, index) => <Option key={index} value={value}>{value}</Option>);

    return (
        <Modal {...modalOpts}>
					<Spin spinning={modalLoading} tip="加载中...">

						<Form layout="horizontal">

							<FormItem
								label="包间名："
								hasFeedback
								{...formItemLayout}
							>
								{getFieldDecorator('tech_no', {
									initialValue: item.tech_nso || '',
									rules: [
										{required: true, message: "包间名未填写"},
									],
								})(
									<Input type="text" placeholder="请输入包间名" />
								)}
							</FormItem>

							<FormItem
								label="包间类型："
								{...formItemLayout}
							>
								<Row>
									<Col span={17}>
										<FormItem
											hasFeedback
										>
											{getFieldDecorator('tech_phone', {
												initialValue: item.tech_phone,
												rules: [
													{required: true, message: "包间类型未填写"},
												],
											})(
												<Select placeholder="请选择包间类型" size="large">
													{loop(data)}
												</Select>
											)}
										</FormItem>
									</Col>
									<Col span={7}><Button className="fr" size="large" onClick={onAddType}><Icon type="plus" />新增类型</Button></Col>
								</Row>
							</FormItem>

							<FormItem
								label="容纳人数："
								hasFeedback
								{...formItemLayout}
							>
								{getFieldDecorator('name', {
									initialValue: item.name,
									rules: [
										{required: true, message: "容纳人数未填写"},
									],
								})(
										<Input type="text" placeholder="请输入容纳人数" />
								)}
							</FormItem>

						</Form>

					</Spin>
        </Modal>
    );
};

RoomsManageModal.propTypes = {
    title: PropTypes.any,
    visible: PropTypes.any,
    item: PropTypes.object,
    btnLoading: PropTypes.any,
    modalLoading: PropTypes.any,
    form: PropTypes.object,
    onOk: PropTypes.func,
};

export default Form.create()(RoomsManageModal);